<template>
	<view class="content">
		<view class="PersonalCenter">
			<view class="person-head">
				<image src="@/static/bgimg/home-bg.png" mode=""></image>
			</view>
			<view class="person-item">
				<view class="person-info">
					<view class="flex-col-btw">
						<view class="size-20 color-ff size-bold">微信用户</view>
						<view class=" size-16 color-ff" @click="handleToModify">完善个人资料 ></view>
					</view>
					<view class="info-img" @click="handleToModify">
						<image src="../../static/test/test_1.png" mode=""></image>
					</view>
				</view>
				<!-- 我的订单 -->
				<view v-for="(section, sectionIndex) in sections" :key="sectionIndex" class="MyOrder border-10">
					<view class="MyOrder-title flex-row-btw">
						<view class="size-20 color-333 weight-600">{{ section.title }}</view>
						<!-- “全部订单”按钮仅在“我的订单”中显示 -->
						<view v-if="section.showAllOrdersButton" class="flex-row-btw" @click="handleToOrderer">
							<view class="color-666 size-16">全部订单</view>
							<view class="MyOrder-zjt flex-row-btw">
								<image src="../../static/icon/icon-zjt.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="menu-sle">
						<view class="flex-col-center" style="width: 20%;" v-for="(item, index) in section.menuItems"
							:key="index" @click="handleToState(item.path,index)">
							<view class="MyOrder-menu"
								:style="{ width: item.width + 'rpx', height: item.height + 'rpx' }">
								<image :src="item.imgSrc" mode="aspectFit" :style="{ width: '100%', height: '100%' }">
								</image>
								<view class="badge" v-if="item.name==='待付款'"> {{item.number}}</view>
							</view>
							<view class="color-666 size-14 m-t-8">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<!-- 其他 -->
				<view class="other-box border-10">
					<view class="size-20 color-333 weight-600">其他</view>
					<view class="other-item" v-for="item in otherList">
						<view class="color-666 size-16">{{item.name}}</view>
						<view class="MyOrder-zjt">
							<image src="../../static/icon/icon-zjt.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--悬浮客服按钮 -->
		<liu-drag-button style="z-index: 50;">
			<image src="../../static/icon/icon-kf.png" mode="" style="width: 100%;height: 100%;"></image>
		</liu-drag-button>
		<!-- 底部导航栏 -->
		<tabbarVue :currentIndex="4"></tabbarVue>
	</view>
</template>

<script>
	import tabbarVue from '../../components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbarVue,
		},
		data() {
			return {
				sections: [
					// 我的订单
					{
						title: "我的订单",
						showAllOrdersButton: true,
						menuItems: [{
								id: 'dfk',
								name: "待付款",
								imgSrc: "/static/icon/icon-dfk.png",
								path: '/pages/me/orderPage/orderPage',
								width: 60,
								height: 60,
								number: 99
							},
							{
								id: 'dfh',
								name: "待发货",
								imgSrc: "/static/icon/icon-dfh.png",
								path: '/pages/me/orderPage/orderPage',
								width: 60,
								height: 50,
							},
							{
								id: 'dsh',
								name: "待收货",
								imgSrc: "/static/icon/icon-dsh.png",
								path: '/pages/me/orderPage/orderPage',
								width: 60,
								height: 60,
							},
							{
								id: 'sh',
								name: "售后",
								imgSrc: "/static/icon/icon-sh.png",
								path: '/pages/me/orderPage/orderPage',
								width: 60,
								height: 60
							}
						]
					},

					{
						title: "我的服务",
						showAllOrdersButton: false,
						menuItems: [{
								id: 'dz',
								name: "我的地址",
								imgSrc: "/static/icon/icon-dz.png",
								width: 50,
								height: 50,
								path: '/pages/me/MyAddress/MyAddress'
							},
							{
								id: 'zsgl',
								name: "评价中心",
								imgSrc: "/static/icon/icon-pjzx.png",
								width: 50,
								height: 50,
								path: '/pages/me/assessmentCenter/assessmentCenter',
								
								
							},
							{
								id: 'scj',
								name: "产品收藏",
								imgSrc: "/static/icon/icon-scj.png",
								width: 50,
								height: 50,
								path: '/pages/me/collectItem/collectItem'
							},
							{
								id: 'll',
								name: "浏览记录",
								imgSrc: "/static/icon/icon-ll.png",
								width: 50,
								height: 50,
								path: '/pages/me/record/record'

							},
							{
								id: 'sc',
								name: "文章收藏",
								imgSrc: "/static/icon/icon-sc.png",
								width: 50,
								height: 50,
								path: '/pages/me/collectText/collectText'
							}
						]
					}
				],
				otherList: [{
						id: 'bzzx',
						name: "帮助中心"
					}, {
						id: 'byzn',
						name: '保养指南'

					},
					{
						id: 'yhxy',
						name: "用户协议"
					}, {
						id: 'shzc',
						name: '售后政策'

					},

				]

			}
		},
		methods: {
			handleToModify() {
				uni.navigateTo({
					url: '/pages/me/modifyUserInfo/modifyUserInfo'
				})
			},
			handleToOrderer() {
				uni.navigateTo({
					url: "/pages/me/orderPage/orderPage"
				})

			},
			handleToState(path, index) {
				uni.navigateTo({
					url: `${path}?index=${index}`
				});

			},


		}
	}
</script>

<style lang="less" scoped>


	.MyOrder-zjt {
		width: 20rpx;
		height: 30rpx;
		margin-left: 10rpx;

		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

	}

	.PersonalCenter {
		width: 100%;
		height: calc(100vh - 60rpx - env(safe-area-inset-bottom));
		position: relative;

		.person-head {
			width: 100%;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.person-item {
			width: 100%;
			position: absolute;
			top: 40rpx;
			left: 0;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 30rpx;
			padding-bottom: 160rpx;

			.person-info {
				display: flex;
				justify-content: space-between;

				.info-img {
					width: 160rpx;
					height: 160rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

				}
			}

			.MyOrder {
				width: 100%;
				background-color: #fff;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 50rpx;



				.MyOrder-title {}

				.menu-sle {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					gap: 35rpx;

					.MyOrder-menu {
						position: relative;
					}

					.badge {
						position: absolute;
						bottom: 30px;
						right: -10px;
						padding: 4rpx;
						font-size: 12px;
						color: #fff;
						border-radius: 50%;
						background-color: #C8A86E;
						width: 18px;
						height: 18px;
						display: flex;
						align-items: center;
						justify-content: center;

					}
				}
			}

			.other-box {
				width: 100%;
				background-color: #fff;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: calc(100rpx - env(safe-area-inset-bottom));

				.other-item {
					padding: 30rpx 0rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #e9e9e9;
				}
			}
		}

	}
</style>